import React ,{Component} from "react"
import {View,Text,ScrollView} from "react-native"
import {connect} from "react-redux";
import Echarts from 'native-echarts';
class ManagementData extends Component{
    constructor(props) {
        super(props);
        this.state = {
            numDataY:["2", "53", "24", "6", "100", "20",'30'],
            othernumDataY:["10", "40", "20", "80", "120", "25",'5'],

            apple:[2, 4, 7, 2, 2, 7, 13, 16],
            organ: [6, 9, 9, 2, 8, 7, 17, 18],

        };

    }


    render(): React.ReactNode {
        const option1 = {
            title: {
                text: 'ECharts demo'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        const option= {
            //图形位置样式
            grid:{
                right:15,
                bottom:30,
            },
            title: {
                text: '访客数量',
                textStyle:{
                    color:'#8e8e93',
                    fontSize:14,
                    padding:[10,0,0,10],
                },
                top:0,
                left:5,
            },
            //点击图形某个位置的显示弹框
            tooltip: {
                trigger:'axis',
            },
            //统计数据的种类切换
            legend: {
                orient:'vertical',
                data: [{name:'访客数量',icon: 'circle',},{name:'付款金额',icon: 'circle'}],
                selectedMode:'multiple',
                backgroundColor:'#fff',
                align:'left',
                right:20,//距离右边界20
                top:5,
            },
            toolbox:{
                orient:'vertical',
                show:true,
                showTitle:true,
                feature:{
                    magicType:{
                        type: 'bar',
                    },
                },
            },
            xAxis: [
                {
                    axisTick:{
                        show:true,
                        alignWithLabel:true,
                    },
                    data: ["周一", "周二", "周三", "周四", "周五", "周六","周日"],
                }
            ],
            yAxis: [
                {
                    axisTick:{
                        show:false,
                        alignWithLabel:false,
                    },
                    nameLocation:'end',
                    nameTextStyle:{
                        color:'#8e8e93',
                        fontSize:12,
                        align:'right',
                        padding:[0,0,0,10],
                        left:10,
                    },
                    interval:0,//强制分割间隔
                    nameGap:15,
                    name:'访客数量(个)',
                    offset:-5,
                }
            ],
            color:['#e62129','#007aff'],
            //数据配置
            series: [
                {
                    name: '访客数量',
                    type: 'bar',
                    data:this.state.numDataY ,
                },
                {
                    name: '付款金额',
                    type: 'line',
                    data:this.state.othernumDataY ,
                }
            ]
        };

        const option2 = {
            //点击某一个点的数据的时候，显示出悬浮窗
            tooltip : {
                trigger: 'axis'
            },
            //可以手动选择现实几个图标
            legend: {
                data:['苹果','橘子']
            },
            //各种表格
            toolbox: {
                //改变icon的布局朝向
                //orient: 'vertical',
                show : true,
                showTitle:true,
                feature : {
                    //show是否显示表格，readOnly是否只读
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        //折线图  柱形图    总数统计 分开平铺
                        type: ['line', 'bar','stack','tiled'],
                    },

                }
            },
            xAxis : [
                {
                    //就是一月份这个显示为一个线段，而不是数轴那种一个点点
                    boundaryGap:true,
                    type : 'category',
                    name : '时间',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '销量(kg)'
                }
            ],
            //图形的颜色组
            color:['rgb(249,159,94)','rgb(67,205,126)'],
            //需要显示的图形名称，类型，以及数据设置
            series : [
                {
                    name:'苹果',
                    //默认显
                    type:'bar',
                    data:this.state.apple
                },
                {
                    name:'橘子',
                    type:'bar',
                    data:this.state.organ
                }
            ]
        };

        const option4 = {
            tooltip: {    //定义环形图item点击弹框
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {     //定义右边的菜单目录效果
                orient: 'vertical',
                x: 400,
                y:'center',
                right:50,
                //width:90
                itemGap:4.50,
                color:'#666666',
                itemWidth:12,
                itemHeight:12,
                //data:legend     //这里的data要和下面外层的data的name相对应，否则会显示为空
                data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            series: [{
                name:'月份销量',
                type:'pie',
                hoverAnimation:false,
                radius: ['58%', '90%'],     //设置环形图展示半径空心圆环
                avoidLabelOverlap: false,
                center: ['25%', '50%'],     //这里可以设置环形图展示的位置
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {               //设置点击展示环形图内部文本样式
                        show: true,
                        textStyle: {
                            color:'#666666',
                            fontSize: '11',
                            fontWeight: 'bold'
                        }
                    }
                },

                labelLine: {
                    normal: {
                        show: false
                    }
                },
                //data:monthdata    //这里的data是定义环形图的展示内容
                data:[{value:2.00, name:'1月'}, {value:3.00, name:'2月'}, {value:3.00, name:'3月'}, {value:2.00, name:'4月'}, {value:5.00, name:'5月'}, {value:7.00, name:'6月'},
                {value:3.00, name:'7月'},{value:7.00, name:'8月'},{value:25.00, name:'9月'}, {value:3, name:'10月'}, {value:3, name:'11月'}, {value:3, name:'12月'}]
            }],
            //可以根据下标来定义item内容的颜色
            color:['#01a2ea', '#8ac99c','#23ac38','#b4d467','#ffff00','#fdcc89','#f19049','#ea6941','#f95353','#cc5ac0','#ac5fd7','#5570b5']

        };


        return <ScrollView >
            <Text style={{fontSize:48}}>经营数据</Text>
            <Echarts option={option1} height={300} />
            <Echarts option={option2} height={300} />
            <Echarts option={option} height={300} />
            <Echarts option={option4} height={250} />
        </ScrollView>;
    }
}


export default connect(
    (state) => {
        return {
        }
    },
    (dispatch) => ({

    })
)(ManagementData)